<template>
  <div>
    <Header>
      <el-button size="small" @click="$router.push('/limit/list')">
        返回
      </el-button>
      <el-button size="small" type="primary" @click="btnfanhui"
        >返回管理商品</el-button
      >
      <el-button size="small" @click="addAll({}, 'all')">批量添加</el-button>
      <!-- <el-button>批量移除</el-button> -->
      &nbsp;&nbsp;
      <el-select
        v-model="select"
        size="small"
        style="width:150px"
        placeholder="下单时间"
        @change="selectOneTag"
      >
        <el-option
          v-for="item in optionList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-checkbox v-model="select1" label="1"
        >活动进行期间不可原价购买</el-checkbox
      >

      <div class="heads-right" style="width:20%;">
        <div style="display: flex">
          <div style="line-height: 35px; color: #606266">
            <span>销售价格</span>
          </div>
          <div style="margin-left:10px;">
            <el-input
              v-model="input"
              size="small"
              style="width:100px"
              placeholder=""
            ></el-input>
          </div>
          -
          <div>
            <el-input
              v-model="input1"
              size="small"
              style="width:100px"
              placeholder=""
            ></el-input>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-input v-model="searchval" placeholder="请输入关键字" size="small">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="shopsearch"
            ></el-button>
          </el-input>
        </div>
      </div>
    </Header>
    <Main
      :data="tableData"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <!-- <div class="list-title">
        <span>限时折扣</span>—<span style="cursor:pointer;" @click="active"
          >活动名称</span
        >—<span>管理活动商品</span>
      </div> -->

      <el-table-column
        type="selection"
        width="55"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column label="商品名称" min-width>
        <template slot-scope="scope">
          <div style="margin-left:10px;line-height:25px;">
            <div><span></span>{{ scope.row.goods_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品封面" min-width>
        <template slot-scope="scope">
          <div>
            <img
              :src="Url + scope.row.goods_cover"
              alt=""
              width="70px"
              height="50px"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sale-price"
        label="销售价"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
            >￥{{ scope.row.low_goods_price }}</span
          >
          <span v-else
            >￥{{ scope.row.low_goods_price }} - ￥{{
              scope.row.up_goods_price
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="activity-price"
        label="成本价"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.low_cost == scope.row.up_cost"
            >￥{{ scope.row.low_cost }}</span
          >
          <span v-else
            >￥{{ scope.row.low_cost }} - ￥{{ scope.row.up_cost }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_limit"
        label="商品状态"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status == 'normal'">正常</span>
          <span v-if="scope.row.status == 'temporarily'">下架</span>
          <span v-if="scope.row.status == 'sell_out'">售罄</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_salecount"
        label="实际销量"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="goods_stock"
        label="商品库存"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="deal"
        label="操作"
        align="center"
        show-overflow-tooltip
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.flag == 0"
            size="mini"
            type="text"
            @click="add(scope.row)"
          >
            添加
          </el-button>
          <!-- v-if="scope.row.flag == 0" -->
          <span v-if="scope.row.flag == 1">同一时间，已参加拼团</span>
          <span v-if="scope.row.flag == 2">同一时间，已参加限时折扣</span>
          <span v-if="scope.row.flag == 4">同一时间，已参加砍价</span>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <el-dialog
      title="设置活动信息"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div><span>商品名称:</span>{{ mesage }}</div>
      <div style="margin-top:20px;">
        <div style="margin-top:20px;">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动价格" label-width="100" prop="name">
              <el-input
                v-model="form.name"
                style="width:150px;"
                size="mini"
              ></el-input
              >元
            </el-form-item>
            <el-form-item label="活动库存" label-width="100" prop="name1">
              <el-input
                v-model="form.name1"
                style="width:150px;"
                size="mini"
              ></el-input
              >件
            </el-form-item>
          </el-form>
          <div style="margin-top:10px;">
            <span>销售价:&nbsp;&nbsp;</span>￥{{ lowCost }}-{{
              upCost
            }}&nbsp;&nbsp;<span>成本价:&nbsp;&nbsp;</span>￥{{
              lowGoodsPrice
            }}-{{ upGoodsPrice }}&nbsp;&nbsp;<span>当前价格:&nbsp;&nbsp;</span
            ><span>&nbsp;&nbsp;￥12.00</span>
          </div>
        </div>
        <div style="display:flex; margin-top: 20px;">
          <div style="line-height: 35px;"><span>活动价限购:</span></div>
          <div style="margin-left:20px;">
            <el-input v-model="limitprice" placeholder="请输入内容"></el-input>
          </div>
          件
          <div style="margin-left:20px;">
            <span>填写0，表示不设置活动限购</span>
          </div>
        </div>
        <div style="display:flex; margin-top: 20px;">
          <div style="line-height: 35px;"><span>活动排序:</span></div>
          <div style="margin-left:37px;">
            <el-input v-model="inputa" placeholder="请输入内容"></el-input>
          </div>
          <div style="margin-left:20px;">
            <span>填写0，表示不设置活动限购</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTwos">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleTwo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置活动信息"
      :visible.sync="dialogVisibled"
      width="35%"
      :before-close="handleClose"
    >
      <div>
        <div style="margin-top:10px;">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动价格" label-width="100" prop="name2">
              <el-input
                v-model="form.name2"
                style="width:150px;"
                size="mini"
              ></el-input
              >元
            </el-form-item>
            <el-form-item label="活动库存" label-width="100" prop="name3">
              <el-input
                v-model="form.name3"
                style="width:150px;"
                size="mini"
              ></el-input
              >件
            </el-form-item>
          </el-form>
        </div>
        <div style="display:flex; margin-top: 20px;">
          <div style="line-height: 35px;"><span>活动价限购:</span></div>
          <div style="margin-left:20px;line-height: 35px;">
            <el-input v-model="limitPrice" placeholder="请输入内容"></el-input>
          </div>
          <div style="margin-left:20px;line-height: 35px;">
            <span>填写0，表示不设置活动限购</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleOned">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleOne">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GOODSLISTShop } from "@/service/shop";
import { ADDSHOP, GETGOODSSKU } from "../service";
export default {
  name: "Addshop",
  data() {
    return {
      select: "商品分组",
      select1: false,
      dialogVisible: false,
      dialogVisibled: false,
      limitprice: "",
      inputa: "",
      input: "0.00",
      searchval: "",
      input1: "",
      limit_id: "",
      mesage: "",
      lowCost: "",
      upCost: "",
      lowGoodsPrice: "",
      upGoodsPrice: "",
      goods_id_arr: "",
      Url: this.$store.state.qiniu,
      goods: [],
      tableData: [],
      tableDataALL: [],
      addCode: [],
      form: {
        name: "",
        name1: "",
        name2: "",
        name3: ""
      },
      limitPrice: "",
      rules: {
        name: [{ required: true, message: "必须输入", trigger: "blur" }],
        name1: [{ required: true, message: "必须输入", trigger: "blur" }]
      },
      optionList: [{ id: 1, name: "分组1" }, { id: 2, name: "分组2" }],
      page: 0,
      totals: 0,
      num: [],
      array: []
    };
  },
  created() {
    this.shopAPI();
    this.addshopAPI();
    this.limit_id = this.$route.query.limit_id;
  },
  methods: {
    selectOneTag(val) {
      this.select = val;
      this.shopAPI();
    },
    active() {
      this.$router.push("/limitList");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    dialogVisibleOne() {
      if (this.form.name3 === "") {
        this.$message({
          message: "请输入正确库存",
          type: "error"
        });
      } else if (this.form.name2 === "") {
        this.$message({
          message: "请输入统一价格",
          type: "error"
        });
      } else if (this.limitPrice === "") {
        this.$message({
          message: "请输入商品限购",
          type: "error"
        });
      } else {
        ADDSHOP({
          limit_id: this.limit_id,
          stock: this.form.name3,
          unite_price: this.form.name2,
          limit_buy: this.limitPrice,
          sort: 0,
          goods_id_arr: this.num.join(","),
          goods: ""
        }).then(res => {
          if (res.code === 200) {
            this.$message(res.msg);
            this.$router.push({
              path: "/shopmanage?limit_id=" + this.limit_id
            });
          } else {
            this.$error(res.msg);
          }
          this.dialogVisibled = false;
        });
      }
    },
    dialogVisibleOned() {
      this.dialogVisibled = false;
    },
    dialogVisibleTwo() {
      if (this.form.name1 === "") {
        this.$message({
          message: "请输入正确库存",
          type: "error"
        });
      } else if (this.form.name === "") {
        this.$message({
          message: "请输入统一价格",
          type: "error"
        });
      } else if (this.limitprice === "") {
        this.$message({
          message: "请输入商品限购",
          type: "error"
        });
      } else {
        this.addshopAPI();
        this.$router.push({ path: "/shopmanage?limit_id=" + this.limit_id });
      }
    },
    dialogVisibleTwos() {
      this.dialogVisible = false;
    },
    btnfanhui() {
      this.$router.push({ path: "/shopmanage?limit_id=" + this.limit_id });
    },
    shopAPI() {
      GOODSLISTShop({
        app_id: this.$store.state.app_id,
        _token: this.$store.state._token,
        page: this.page,
        goods_name: this.searchval,
        pageshow: 10,
        flag: this.checked ? "" : "all",
        lowprice: this.input,
        upprice: this.input1
      }).then(res => {
        if (res.code === 200) {
          this.totals = res.data.length;
          this.tableData = res.data.list;
          this.$message(res.msg);
        }
      });
    },
    addshopAPI() {
      ADDSHOP({
        limit_id: this.limit_id,
        stock: this.form.name1,
        unite_price: this.form.name,
        limit_buy: this.limitprice,
        sort: this.inputa,
        goods_id_arr: this.goods_id_arr,
        goods: JSON.stringify(this.arr)
      }).then(res => {
        if (res.code === 200) {
          this.$message(res.msg);
        }
      });
    },
    shopsearch() {
      this.shopAPI();
    },
    handleSelectionChange(e) {
      this.addCode = e;
    },
    changes(page) {
      this.page = page;
      this.shopAPI();
    },
    addAll() {
      this.dialogVisibled = true;
      let arr = [];
      this.addCode.map(ele => {
        arr.push(ele.goods_id);
      });
      this.num = arr;
    },
    add(row) {
      this.mesage = row.goods_name;
      this.lowCost = row.low_cost;
      this.upCost = row.up_cost;
      this.lowGoodsPrice = row.low_goods_price;
      this.upGoodsPrice = row.up_goods_price;
      this.goods_id_arr = row.goods_id;
      this.dialogVisible = true;
      GETGOODSSKU({ goods_id: this.goods_id_arr }).then(res => {
        if (res.code === 200) {
          res.data.forEach(ele => {
            ele.status = true;
            ele.join_price = 0;
            ele.join_stock = 0;
            ele.sku_price = parseFloat(ele.sku_price);
            ele.sku_type_name = ele.sku_type_name.split(",");
          });
          this.tableDataALL = res.data;
          this.sku_type = res.data[0].attr_names.split(",");
          let arry = [];
          this.tableDataALL.forEach(ele => {
            arry.push({
              uniqueKey: ele.uniqueKey,
              status: ele.status ? 1 : 0,
              join_price: ele.join_price,
              join_stock: ele.join_stock
            });
            this.arr = arry;
          });
        }
      });
    },
    checkSelectable(row) {
      return row.flag === 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.addshop {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  .addshop-title {
    height: 54px;
    line-height: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 35px;
    background-color: rgba(255, 255, 255, 1);
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    font-size: 14px;
  }
  .addshop-nav {
    width: 97%;
    margin-left: 30px;
    height: 120px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .nav-left {
      width: 45%;
      margin-left: 20px;
      margin-top: 14px;
      color: #606266;
    }
    .nav-right {
      margin-top: 14px;
      margin-right: 30px;
    }
  }
  .addshop-content {
    width: 97%;
    margin-left: 30px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    border-top: 1px solid gainsboro;
  }
  .footer {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 90px;
    line-height: 76px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    z-index: 100;
  }
}
</style>
